<template>
  <div>
    <Row style="margin: 50px 30px;">
      <Col span="12" style="text-align: right;">
        <span class="top-title">请选择需要导入的文件，并开始导入</span>
        <span class="tip-text" @click="tipShow = true">上传规则说明<img class="tips-icon" src="@/assets/icons/tishi.png" alt=""></span>
        <Modal v-model="tipShow">
            <div slot="header">
              <p style='text-align:center;'>上传规则说明</p>
            </div>
            <div style="white-space:normal;">
              <h4>文件说明</h4>
              <p>1、上传文件不能超过2M，仅支持.xls以及.xlsx格式文件</p>
              <p>2、导入文件尽量是下载导入文件模板进行编辑导入</p>
              <p>3、模板内填写数据中“红色字段”是必填项，非红色字段是非必填项</p>
              <h4>字段说明</h4>
              <p>1.学生姓名、老师姓名、备注名、班级分类最多输入10个字符</p>
              <p>2.手机号码默认只能输入11位数字</p>
              <p>3.费用默认保留小数点后两位</p>
              <p>4.性别默认选择：男/女</p>
              <p style="color:rgba(213,130,66,1);">5.生日默认填写：年 月 日（非必填）</p>
              <p>6.学生类型选择：试课学生/正式学生</p>
              <p>7.老师身份选择：老师/管理员/管理员+老师</p>
              <p>8.费用展示：默认保留小数点后两位</p>
              <p>9.人数、课时数默认只能填写大于等于0的整数</p>
              <p>10.老师地址：省市区（重庆市-重庆市-渝北区）</p>
              <p style="color:rgba(213,130,66,1);">11.教室地址：最多输入30个字（非必填）</p>
              <p style="color:rgba(213,130,66,1);">12.备注字段：暂时不作为上传字段</p>
              <p style="color:rgba(213,130,66,1);margin-top:10px;">注：以上“非必填”项字段已标注，其余均是必填项</p>
            </div>
            <div slot="footer"></div>
          </Modal>
      </Col>
      <Col span="12" style="text-align: right;padding-right: 60px;">
        <Button type="primary" icon="ios-download-outline" @click="downloadTemplate">
          下载模板
        </Button>
      </Col>
    </Row>
    <Row type='flex' justify='center'>
      <Col span="24" style="text-align:center;">
        <Upload
          ref='upload'
          :max-size='2048'
          accept='.xls,.xlsx'
          name='file'
          :show-upload-list='false'
          :headers="headers"
          :on-success='handleUploadSuccess'
          :on-error='handleUploadError'
          :before-upload="handleUpload"
          :action="action_url">
          <div style="padding: 60px 20px 20px 20px;border: 1px dashed #e9e9e9;border-radius: 15px;width: 300px;">
            <Button style="background-color: #2276EB;color: white;" type="default">{{!!file ? '重新选择' : '选择文件'}}</Button>
            <p style="margin-top:10px;">或拖动需要上传的Excel文件到方框中</p>
            <p style="margin-top:10px;font-size:14px;font-weight:bold;color:#2276EB;" v-if="!!file"><Icon color="#19be6b" type="md-document" /><span v-text="file.name"></span></p>
          </div>
        </Upload>
        <div style="width: 300px;text-align:left;margin: auto;">
          <p style="margin-top:10px;">1、上传文件不能超过2M，仅支持.xls以及.xlsx格式文件</p>
          <p>2、导入文件尽量是下载导入文件模板进行编辑导入</p>
          <p style="margin-bottom:15px;">3、模板内填写数据中“红色字段”是必填项，非红色字段是非必填项</p>
        </div>

      </Col>
    </Row>
    <Row type='flex' justify='center'>
      <Col span="4" style="text-align:center;margin:30px 0px;">
        <Button ghost @click="upload" :loading="loadingStatus" type="success">检验数据</Button>
      </Col>
    </Row>
  </div>
</template>
<style scoped>
.top{
  display: flex;
  height: 21px;
  align-items: flex-end;
  margin: 30px 0px;
}
.top-title{
  font-size: 19px;
  color:black;
  margin-right: 15px;
}
.tip-text{
  line-height: 21px;
  height: 21px;
  font-size: 12px;
  display: inline-block;
  align-items: center;
}
.tips-icon{
  width: 14px;
  height: 14px;
}
.item{
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.item-left,.item-right{
  display: flex;
  width: 50%;
  align-items: center;
}
.item-right{
  cursor: pointer;
  width: 30%;
  justify-content: flex-end;
}
</style>
<script>
import { getDomain } from '@/local_config.js'
import { getToken } from '@/libs/util'
export default {
  name: 'step-one',
  data () {
    return {
      file: null,
      loadingStatus: false,
      tipShow: false
    }
  },
  methods: {
    downloadTemplate () {
      window.open('/public/学校数据导入模板.xlsx')
    },
    upload () {
      if (!this.file) {
        return false
      }
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '正在努力校验数据中...')
          ])
        }
      })
      this.loadingStatus = true
      this.$refs.upload.post(this.file)
    },
    handleUpload (file) {
      this.file = file
      return false
    },
    handleUploadSuccess (res) {
      const { data } = res
      this.$Message.success('上传成功!')
      this.$emit('upload-success', data.name)
      this.file = null
      this.loadingStatus = false
    },
    handleUploadError () {
      this.$Message.error('上传失败!')
      this.loadingStatus = false
    },
    init () {
      this.file = null
    }
  },
  computed: {
    headers () {
      const token = getToken()
      return {
        Authorization: `Bearer ${token}`
      }
    },
    action_url () {
      const domain = getDomain()
      return `${domain}upload`
    }
  }
}
</script>
<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
